<template>
	<view class="layout">
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
/***********************

花瓣网头部渐变

*************************/

.layout{
    width: 100%;
    height: 100vh;
    background: 
    linear-gradient(to bottom, transparent, #fff 260px),
    radial-gradient(20% 150px at 70% 230px, rgba(0,210,255,0.2),transparent),
    radial-gradient(40% 180px at 80% 50px, rgba(249,167,176,0.3),transparent),
    radial-gradient(50% 300px at 90% 100px, rgba(212,230,241,0.8),transparent),            
    radial-gradient(20% 150px at 0px 0px, rgba(162,213,239,0.5),transparent),
    radial-gradient(30% 200px at 100px 50px, rgba(249,167,176,0.5),transparent),
    #FFF0F5;
}





/***********************

径向渐变背景壁纸案例

*************************/
/*
.layout{
	width: 100%;
	min-height: 100vh;
	background: 
	linear-gradient(to bottom,transparent,#fff 600px),
	radial-gradient(90% 300px at left top, #95E0DC, transparent),
	radial-gradient(60% 300px at right top, #D3CBFC, transparent);
}*/

	
	
/***********************

带图标的 线性渐变背景

*************************/
/*
.layout{
	width: 100%;
	min-height: 100vh;
	background: 
	url("https://img95.699pic.com/xsj/13/bj/hb.jpg%21/fh/300") no-repeat 80% 50px,
	linear-gradient(to bottom,transparent 100px,#FFF 600rpx),
	linear-gradient(to right,#D2EEF9,#FFD1DE);
}
*/

/***********************

径向渐变背景

*************************/
/*
.layout{
	width: 100%;
	min-height: 100vh;
	background: radial-gradient(100px 60px at 20% 100px, #e66465, transparent);
}
*/
</style>
